import PubSub from 'pubsub-js'
import moment from 'moment'

import request from '../../utils/request'

//获取全局实例
const appInstance = getApp();

let startX = 0;// 手指起始的坐标
let moveX = 0;// 手指移动的坐标
let moveDistance = 0;// 手指移动的距离
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, //音乐是否播放
    song: {},//歌曲详情对象
    musicId: '',//音乐id
    musicLink: '',//音乐的链接
    currentTime: '00:00',  // 实时时间
    durationTime: '00:00', // 总时长
    currentWidth: 0, // 实时进度条的宽度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //路由传参，recommendSong页面跳转过来，options接收
    let musicId = options.musicId;
    this.setData({
      musicId
    })
    this.getMusicInfo(musicId);

    // 判断当前页面音乐是否在播放
    if(appInstance.globalData.isMusicPlay && appInstance.globalData.musicId == musicId){
      // 修改当前页面音乐播放状态为true
      this.setData({
        isPlay: true
      })
    }

    // 创建控制音乐播放的实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    
    /*
     * 问题： 如果用户操作系统的控制音乐播放/暂停的按钮，页面不知道，导致页面显示是否播放的状态和真实的音乐播放状态不一致
     * 解决方案：
     *   1. 通过控制音频的实例 backgroundAudioManager 去监听音乐播放/暂停
     *
     * */
    // 监听音乐播放
    this.backgroundAudioManager.onPlay(()=>{
      this.changePlayState(true);
      //修改全局音乐播放的状态
      appInstance.globalData.musicId = this.data.musicId;

    })
    //监听音乐暂停
    this.backgroundAudioManager.onPause(()=>{
      this.changePlayState(false);
    })
    //监听音乐停止
    this.backgroundAudioManager.onStop(()=>{
      this.changePlayState(false);
    })

    // 监听音乐播放自然结束
    this.backgroundAudioManager.onEnded(() => {
      // 自动切换至下一首音乐，并且自动播放
      PubSub.publish('switchType', 'next')
      // 将实时进度条的长度还原成 0；时间还原成 0；
      this.setData({
        currentWidth: 0,
        currentTime: '00:00'
      })
    });

    //监听音乐实时播放的速度
    this.backgroundAudioManager.onTimeUpdate(()=>{
      // console.log('总时长',this.backgroundAudioManager.duration);
      // console.log('实时时长',this.backgroundAudioManager.currentTime);

      //格式化实时的播放时间
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss');
      let currentWidth = this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration * 450;
      this.setData({
        currentTime,
        currentWidth
      })
    })


    PubSub.subscribe('musicId', (msg,musicId)=>{
      console.log(musicId);

      //获取音乐详情信息
      this.getMusicInfo(musicId);
      //自动播放当前音乐
      this.musicControl(true, musicId);

      //取消订阅
      PubSub.unsubscribe('musicId');
    });
  },

  // 修改播放状态的功能函数
  changePlayState(isPlay){
    this.setData({
      isPlay
    });
    //修改全局音乐播放的状态
    appInstance.globalData.isMusicPlay = isPlay;
  },

  async getMusicInfo(musicId){
    let songData = await request('/song/detail',{ids:musicId});
    // songData.songs[0].dt 单位ms
    let durationTime = moment(songData.songs[0].dt).format('mm:ss');
    this.setData({
      musicId,
      song:songData.songs[0],
      durationTime
    })
    // 动态修改窗口的标题
    wx.setNavigationBarTitle({
      title: this.data.song.name
    })
  },

  //点击播放、暂停的回调
  handleMusicPlay(){
    let isPlay = !this.data.isPlay;
    //修改是否播放状态
    this.setData({
      isPlay
    })

    let {musicId, musicLink} = this.data;
    this.musicControl(isPlay, musicId, musicLink);

  },

  //控制音乐播放、暂停的功能函数
  async musicControl(isPlay, musicId, musicLink){
    if(isPlay){//音乐播放
      if(!musicLink){
        //获取音乐播放地址
        let musicLinkData = await request('/song/url',{id:musicId});
        musicLink = musicLinkData.data[0].url;

        this.setData({
          musicLink
        })
      }
      
      this.backgroundAudioManager.src = musicLink;
      this.backgroundAudioManager.title = this.data.song.name;
      
    }else{//音乐暂停
      console.log(isPlay);
      this.backgroundAudioManager.pause();
    }
  },

  //点击切歌的回调，上一首、下一首
  handleSwitch(event){
    let type = event.currentTarget.id;

    //关闭当前播放的音乐
    this.backgroundAudioManager.stop();

    //发布消息数据给recommendSong页面
    PubSub.publish('switchType', type);
  },
  handleSeek(){
    // this.backgroundAudioManager.seek(170);
  },
  // 拖动进度条，调整播放进度
  handleTouchStart(event){
    // this.setData({
    //   coveTransition: ''
    // })
    // 获取手指起始坐标
    startX = event.touches[0].clientX;
  },
  handleTouchMove(event){
    moveX = event.touches[0].clientX;
    moveDistance = moveX - startX;
    if(moveDistance <= 0){
      return
    }else if(moveDistance >= 225){
      moveDistance = 225
    }
    // 动态更新coverTransform的状态值
    this.setData({
      currentWidth: moveDistance * 2
    })
  },
  handleTouchEnd(){
    // this.setData({
    //   coverTransform: 'translateY(0rpx)',
    //   coveTransition: 'transform 1s linear'
    // })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})